/*
 * @Author: yangzonglong
 * @Date: 2021-03-03 13:28:55
 * @version: v1.0.0
 * @Descripttion: CanvasItem 控件条
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-03-31 13:55:10
 * @Auditor:
 */
import React, { useState, useEffect, useRef } from 'react';
import classname from 'classnames';
import { useSelector } from 'react-redux';
import { Store } from '@library/redux/store';
import Form from './_editTypeForm';
import Icon from './../../../../components/icon/Icon';
import style from './../../../design.module.scss';

interface IProps {
  removeControl(): void;
  copyControl(): void;
  editControl(type: string): void;
  curControl?: any; // 控件的options
}

const actionsWidth = 67; // actions 宽度

// 获取距离canvas画布的距离
const getCanvasTopLeft = (dom: HTMLBaseElement) => {
  // const canvas = document.querySelector('#canvas');
  let top = 0,
    left = 0,
    cur: HTMLBaseElement | null = dom;

  // while (cur !== canvas && cur) {
  //   top += cur.offsetTop;
  //   left += cur.offsetLeft;
  //   cur = cur.parentNode as HTMLBaseElement | null;
  // }
  top = cur.offsetTop;
  left = cur.offsetLeft;
  return { top, left };
};

const CanvasItemActions = ({ curControl, removeControl, copyControl, editControl }: IProps) => {
  const { collapsed } = useSelector((store: Store) => store.common);

  const ref = useRef<HTMLDivElement>(null);
  const timeout = useRef<any>(null);
  const fnRef = useRef<any>(null)
  const [top, setTop] = useState(0);
  const [left, setLeft] = useState(0);
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    if (!fnRef.current) return
    setTimeout(() => fnRef.current?.(), 200)
  }, [collapsed])

  useEffect(() => {
    if (!curControl?.id) return;

    window.removeEventListener('resize', fnRef.current)

    fnRef.current = () => {
      clearTimeout(timeout.current);
      timeout.current = setTimeout(() => {
        const dom = document.querySelector(`[data-controlid=${curControl.id}]`) as HTMLBaseElement;

        if (!dom) return;

        const { top, left } = getCanvasTopLeft(dom);
        setTop(top);
        setLeft(left + dom.offsetWidth - actionsWidth);
        clearTimeout(timeout.current);
      }, 100);
    }

    fnRef.current()

    window.addEventListener('resize', fnRef.current)

    return () => {
      window.removeEventListener('resize', fnRef.current)
    }

  }, [curControl]);


  const onEdit = () => {
    setVisible(true)
  }

  const onCancel = () => {
    setVisible(false)
  }

  const onOk = (v: string) => {
    setVisible(false)
    editControl(v)
  }

  return (
    <div
      ref={ref}
      style={{ top, left, display: 'flex', flexDirection: 'row' }}
      className={classname(style.canvasItemActions, {
        [style.bg]: top && left,
      })}
    >
      <Form onCancel={onCancel} onOk={onOk} visible={visible} initialValue={curControl?.type} />
      {top && left ? (
        <>
          <Icon onClick={onEdit} icon="edit" />
          <Icon onClick={copyControl} icon="copy" />
          <Icon onClick={removeControl} icon="remove" />
          <div></div>
        </>
      ) : null}
    </div>
  );
};

export default CanvasItemActions;
